<!DOCTYPE html>
<html>

<head>
    <title>vue-form example</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
          integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!--  <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">-->
    <style>

        .required-field > label::after {
            content: '*';
            color: red;
            margin-left: 0.25rem;
        }

    </style>
</head>

<body>
<div id="app" class="container py-5">

    <p>Example showing vue-form usage with Bootstrap styles, validation messages are shown on field touch or form submission</p>

    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">

        <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
            <label>Name</label>
            <input type="text" name="name" class="form-control" required v-model.lazy="model.name">

            <field-messages name="name" show="$focused && ($dirty || $submitted)" class="form-control-feedback">
                <div>Success!</div>
                <div slot="required">Name is a required field</div>
            </field-messages>

        </validate>

        <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.email)">
            <label>Email</label>
            <input type="email" name="email" class="form-control" required v-model.lazy="model.email">

            <field-messages auto-label name="email" show="$touched || $submitted" class="form-control-feedback">
                <div>Success!</div>
                <div slot="required">Email is a required field</div>
                <div slot="email">Email is invalid</div>
            </field-messages>

        </validate>

        <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.phone)">
            <label>Phone number (format: xxxx-xxx-xxxx)</label>
            <input type="tel" name="phone" class="form-control" required pattern="^\d{4}-\d{3}-\d{4}$" v-model.lazy="model.phone">

            <field-messages name="phone" show="$touched || $submitted" class="form-control-feedback">
                <div>Success!</div>
                <div slot="required">Phone number is a required field</div>
                <div slot="pattern">Phone number is invalid</div>
            </field-messages>

        </validate>

        <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.department)">
            <label>Department</label>

            <select class="form-control" name="department" required v-model.lazy="model.department">
                <option :value="null">Choose...</option>
                <option value="1">AAA</option>
                <option value="2">BBB</option>
                <option value="3">CCC</option>
            </select>

            <field-messages name="department" show="$touched || $dirty || $submitted" class="form-control-feedback">
                <div>Success!</div>
                <div slot="required">Department is a required field</div>
            </field-messages>

        </validate>

        <validate auto-label class="form-group" :class="fieldClassName(formstate.comments)">
            <label>Comments</label>
            <textarea name="comments" class="form-control" maxlength="50" v-model.lazy="model.comments"></textarea>
            <small class="form-text text-muted">Enter no more than 50 characters.</small>
            <field-messages name="comments" show="$touched || $submitted" class="form-control-feedback">
                <div>Success!</div>
                <div slot="maxlength">Comments must be less than 50 characters</div>
            </field-messages>
        </validate>

        <field class="form-group">
            <label>Not validated</label>
            <input type="text" name="notValidated" class="form-control" v-model.lazy="model.notValidated">
        </field>

        <div class="py-2 text-center">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </vue-form>

    <pre>{{formstate}}</pre>

</div>

<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/vue/vue-form.js"></script>
<script>

    var options = {
        inputClasses: {
            valid: 'form-control-success',
            invalid: 'form-control-danger'
        }
    };

    var vm = new Vue({
        el: '#app',
        mixins: [new VueForm(options)],
        data: {
            formstate: {},
            model: {
                name: '',
                email: '',
                phone: '',
                department: null,
                comments: '',
                notValidated: ''
            }
        },
        methods: {
            fieldClassName: function (field) {

                if (!field) {
                    return '';
                }
                debugger;
                if ((field.$touched || field.$submitted) && field.$valid) {
                    return 'has-success';
                }
                if ((field.$touched || field.$submitted) && field.$invalid) {
                    return 'has-danger';
                }
            },
            onSubmit: function () {
                console.log(this.formstate.$valid);
            }
        }
    });
</script>

</body>

</html>
